<template>
  <div class="flex flex-col space-y-2 pl-2">
    <div>
      <div
        class="inline-block group cursor-pointer relative overflow-hidden rounded-xl"
        @click="file.click()"
      >
        <img :src="info.avatar" alt="头像" height="200" width="200" />
        <div
          class="absolute h-full w-full hidden group-hover:flex justify-center items-center top-0 left-0 text-white group-hover:bg-black group-hover:bg-opacity-40"
        >修改头像</div>
        <input type="file" class="hidden" ref="file" @change="_changeAvatar" />
      </div>
    </div>
    <div class="w-full md:w-1/2 2xl:w-1/3 flex flex-col space-y-2">
      <div class="flex items-center">
        <span class="p-2 bg-gray-100 rounded-md border-2">
          <i class="far fa-fw fa-user"></i>
          <span class="ml-2">用户名</span>
        </span>
        <span class="pl-4">{{ info.username }}</span>
      </div>

      <div class="flex items-center">
        <span class="p-2 bg-gray-100 rounded-md border-2">
          <i class="far fa-fw fa-user-tag"></i>
          <span class="ml-2">角&nbsp;&nbsp;&nbsp;色</span>
        </span>
        <span class="pl-4">
          <Tag
            :value="info.role?.description"
            :title="info.role?.name"
            :severity="
      info.role?.name === 'admin' ? 'danger' :
        (info.role?.name === 'designer' ? 'success' :
          (info.role?.name === 'user' ? 'primary' :
            (info.role?.name === 'supplier' ? 'info' : 'warning')))"
            rounded
          />
        </span>
      </div>

      <div class="flex items-center">
        <span class="p-2 bg-gray-100 rounded-md border-2">
          <i class="far fa-fw fa-envelope"></i>
          <span class="ml-2">邮&nbsp;&nbsp;&nbsp;箱</span>
        </span>
        <span class="pl-4">{{ info.email }}</span>
        <Button icon="far fa-pen" @click="toggle" class="p-button-rounded p-button-text !ml-2" />
        <OverlayPanel ref="op" :showCloseIcon="true">
          <InputText type="text" v-model="newEmail" placeholder="新邮箱" class="p-inputtext-sm !mr-2" />
          <Button
            icon="fas fa-check"
            label="确定"
            class="p-button-primary p-button-sm"
            @click="_changeEmail"
            :disabled="newEmail.trim().length === 0 || newEmail === info.email"
          />
        </OverlayPanel>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'AccountInfo'
})
</script>

<script lang="ts" setup>
import { computed, defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
import { changeAvatar, getLoginInfo, changeEmail } from '@/api/user/user'
import { useToast } from 'primevue/usetoast'

import Button from 'primevue/button'
import Tag from 'primevue/tag'
import OverlayPanel from 'primevue/overlaypanel'
import InputText from 'primevue/inputtext'

let toast = useToast()
const store = useStore()
const file = ref()

const op = ref()
const newEmail = ref('')

const info = computed(() => {
  return store.state.user ? store.state.user : { avatar: '' }
})

function toggle(event: Event) {
  op.value.toggle(event)
}

function _changeAvatar(event: any) {
  if (event.target.files.length > 0) {
    let file = event.target.files[0]
    let formData = new FormData()
    formData.append('avatar', file)

    changeAvatar(formData)
      .then(() => {
        toast.add({
          severity: 'success',
          summary: '修改成功',
          detail: '头像修改成功',
          life: 3000
        })
        _getLoginInfo()
      })
      .catch(() => {
        toast.add({
          severity: 'error',
          summary: '修改失败',
          detail: '头像修改失败',
          life: 3000
        })
      })
  }
}

function _changeEmail() {
  changeEmail(newEmail.value)
    .then(() => {
      toast.add({
        severity: 'success',
        summary: '修改成功',
        detail: '邮箱修改成功',
        life: 3000
      })
      newEmail.value = ''
      _getLoginInfo()
    })
    .catch(() => {
      toast.add({
        severity: 'error',
        summary: '修改失败',
        detail: '邮箱修改失败',
        life: 3000
      })
    })
}

function _getLoginInfo() {
  getLoginInfo()
    .then((res) => {
      store.commit('setLoginUser', res.data)
    })
    .catch(() => { })
}
</script>